<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="../js/goodsdetil.js"></script>
    <title>原生JS实现放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        body {
            height: 2000px;
        }

        .imgbox {
            width: 400px;
            height: 400px;
            margin: 20px auto;
            position: relative;
            /* box-sizing: border-box; */
        }

        .minImg,
        .minImg img {
            width: 100%;
            height: 100%;
        }

        .maxImg {
            width: 400px;
            height: 400px;
            /* height: 500px;
            width: 500px;*/
            overflow: hidden;
            position: absolute;
            /*right: -450px;*/
            left: 410px;
            box-sizing: border-box;
            top: 0;
        }

        .img-mask {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }

        .maxImg img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="imgbox">
        <div class="minImg">
            <img src="//haitao.nosdn2.127.net/898a235e439b4af18bbb193447f530bd1551171207127jsljabbj10139.jpg">
            <div class="img-mask" style="display:none"></div>
        </div>
        <div class="maxImg" style="display:none">
            <img src="//haitao.nosdn2.127.net/898a235e439b4af18bbb193447f530bd1551171207127jsljabbj10139.jpg">
        </div>
    </div>
    <div class="imgbottom">
        <span class="btn-left"></span>
        <div>
            <div class="saveimg">
                <img src="//haitao.nosdn2.127.net/898a235e439b4af18bbb193447f530bd1551171207127jsljabbj10139.jpg" alt=""
                    class="active">
                <img src="//haitao.nos.netease.com/198dd96ed15247ccb51928ec2151899a1551171207553jsljabmp10140.jpg"
                    alt="">
                <img src="//haitao.nosdn1.127.net/5100d9a53cbb496a8dbc9a58ddbf34bf1551171208188jsljac4l10141.jpg"
                    alt="">
                <img src="//haitao.nos.netease.com/7eb32837b6e148d286a9778a1af601f11546483770313jqg0i9xt10411.jpg"
                    alt="">
                <img src="//haitao.nos.netease.com/ca10ccf6146844ed847250d7437f7bd71546483771438jqg0iasu10413.jpg"
                    alt="">
            </div>
        </div>
        <span class="btn-right">
        </span>
    </div>
    <script>
        var imgBox = document.querySelector('.imgbox');
        var minBox = document.querySelector('.minImg');
        var minImg = document.querySelector('.minImg img');
        var mask = document.querySelector('.img-mask');
        var maxBox = document.querySelector('.maxImg');
        var maxImg = document.querySelector('.maxImg img');
        // 小图片盒子绑定鼠标移入事件

        minBox.onmouseenter = function () {
            mask.style.display = "block";
            maxBox.style.display = "block";
        }

        minBox.onmousemove = function (ev) {
            // 为什么不用ev.clientY而用ev.pageY
            // console.log(ev)
            // console.log(ev.clientY, imgBox.offsetTop);
            // console.log(ev.pageX, ev.pageY);

            var moveX = ev.pageX - imgBox.offsetLeft - mask.offsetWidth;
            var moveY = ev.pageY - imgBox.offsetTop * 4 - mask.offsetHeight;
            // console.log(ev.pageX,imgBox.offsetLeft)
            // 遮罩可以运动的最大X方向的距离
            var maxX = minBox.offsetWidth - mask.offsetWidth;
            // 遮罩可以运动的最大Y方向的距离
            var maxY = minBox.offsetHeight - mask.offsetHeight;

            // 设置最大可以移动距离
            if (moveX >= maxX) {
                moveX = maxX;
            }
            if (moveY >= maxY) {
                moveY = maxY;
            }

            // 设置最小可以移动距离
            if (moveX <= 0) {
                moveX = 0;
            }

            if (moveY <= 0) {
                moveY = 0;
            }
            // 大图片可以移动的最大距离
            var biliX = (maxImg.offsetWidth - maxBox.offsetWidth) / maxX;
            // 这个比例相当于是 遮罩移动一像素，大图片需要移动的距离
            var biliY = (maxImg.offsetHeight - maxBox.offsetHeight) / maxY;

            // 给遮罩添加移动
            mask.style.top = moveY + 'px';
            mask.style.left = moveX + 'px';

            // 因为大图片移动的方向是相反的所以要加负号
            maxImg.style.top = -moveY * biliY + 'px';
            maxImg.style.left = -moveX * biliX + 'px';

        }
        minBox.onmouseleave = function () {
            mask.style.display = "none";
            maxBox.style.display = "none";
        }
    </script>
</body>

</html>